<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <!-- <table-filter /> -->
      </div>
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        class="fixed-table-table"
        :multiple-selected="false"
        @page-change="onPageChange"
        @sort-change="onSortChange"
        @selection-change="onSelectionChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button title="预览" type="text" size="mini" icon="el-icon-video-camera" @click="preview(row)" />
          </template>
        </el-table-column>
      </PageableTable>
    </div>
    <ViewDialog
      title="实时预览"
      :show.sync="dialogFormVisible"
      width="30%"
      @on-cancel="onClosePreview"
    >
      <player :src="videoSrc" />
    </ViewDialog>
  </div>
</template>

<script>
import PageableTable from '@neu/biz-core/components/PageableTable'
import ViewDialog from '@neu/biz-core/components/ViewDialog'
import Player from '@neu/dcvm-ui/components/Player'
import { page } from '@neu/dcvm-ui/api/camera'
import databind from '@neu/biz-core/mixins/databind'

const displayAttr = ['ip', 'port', 'cameraid', 'substream']

export default {
  name: 'CamerasPage',
  components: {
    ViewDialog,
    Player,
    PageableTable
  },
  mixins: [databind],
  data() {
    return {
      r: page,
      insideColumns: [
        { title: '名字', key: 'name' },
        { title: '编码', key: 'code' },
        { title: 'IP', key: 'ip' },
        { title: '端口', key: 'port' },
        { title: '摄像机ID', key: 'cameraid' },
        { title: '码流', key: 'substream' }
      ],
      dialogFormVisible: false,
      videoSrc: '',
      editId: -1
    }
  },
  created() {
    this.filter()
  },
  methods: {
    responseFormatter(data) {
      data.forEach(item => {
        item.attrs.filter(it => displayAttr.includes(it.key)).forEach(attr => {
          item[attr['key']] = attr.value
        })
      })

      return data
    },
    preview(row) {
      this.videoSrc = this.getVideoSrc(row)
      this.dialogFormVisible = true
    },
    onClosePreview() {
      this.dialogFormVisible = false
    },
    getVideoSrc(row) {
      return 'http://' + row.ip + ':' + row.port + '/live/cameraid/' + row.cameraid + '/substream/' + row.substream + '.m3u8'
    }
  }
}
</script>
